<template>
	<view @click="toTop">
		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
			<block v-if="all">
				<view class="cu-bar fixed" :style="style"
					:class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor,bgMain?'bg_main':'']">
					<slot name="all"></slot>
				</view>
			</block>
			<block v-else>
				<view class="cu-bar fixed" :style="style"
					:class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor,bgMain?'bg_main':'']">
					<view class="action"  v-if="isBack">
						<text v-if="isShowBack" @tap.stop="BackPage" class="cuIcon-back" :class="isWhiteBack?'text-white':''"></text>
						<image v-if="isShowHome" @tap.stop="BackHome"  style="width: 38rpx;height: 38rpx;" src="/static/images/home.png"></image>
						<!-- <text class="cuIcon-home"></text> -->
						<view @click.stop="BackPage">
							<slot name="backText"></slot>
						</view>
						<view class="cu-load load-cuIcon" :class="load?'loading':'over'"></view>
					</view>
					<view class="content text-white more_text_1 " :style="[{top:StatusBar + 'px'}]">
						<slot name="content"></slot>
					</view>
					<slot name="right"></slot>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				load: false
			};
		},
		name: 'cu-custom',
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var bgImage = this.bgImage;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				if (this.bgImage) {
					style = `${style}background-image:url(${bgImage});`;
				}
				return style
			}
		},
		created() {
			setTimeout(() => {
				this.load = false
			}, 3000)
		},
		props: {
			bgColor: {
				type: String,
				default: ''
			},
			customBack: {
				type: [Boolean, String],
				default: false
			},
			isBack: {
				type: [Boolean, String],
				default: false
			},
			isShowBack: {
				type: [Boolean, String],
				default: true
			},
			isShowHome: {
				type: [Boolean, String],
				default: false
			},
			bgImage: {
				type: String,
				default: ''
			},
			bgMain: {
				type: Boolean,
				default: true
			},
			all: {
				type: Boolean,
				default: false
			},
			isLoad: {
				type: Boolean,
				default: false
			},
			isWhiteBack:{
				type: Boolean,
				default: false
			}
		},
		methods: {
			BackPage() {
				if (this.customBack) {
					this.$emit("backMethod")
				} else {
					uni.navigateBack({
						delta: 1
					});
				}

			},
			BackHome(){
				this.$emit("homeMethod")
			},
			toTop() {
				let _this = this;
				let curTime = new Date().getTime();
				let lastTime = _this.lastTapDiffTime;
				_this.lastTapDiffTime = curTime;
				//两次点击间隔小于300ms, 认为是双击
				let diff = curTime - lastTime;
				if (diff < 300) {
					console.log("双击")
					uni.pageScrollTo({
						scrollTop: 0
					})
					this.$emit('doubleClick')
					this.$emit('update')

					//_this.handleVideo('screen',index)自定义事件
					clearTimeout(_this.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
				} else {
					// 单击事件延时300毫秒执行
					_this.lastTapTimeoutFunc = setTimeout(function() {
						console.log("单击")
						_this.$emit('onceClick')
						//_this.handleVideo('playOrStop',index)自定义事件
					}, 300);
				}

			}
		},
		watch: {
			"isLoad": function(n) {
				console.log(n)
				this.load = n
			},
		}
	}
</script>

<style>
</style>
